<template>
  <div class="sevenbox">
    <!-- //佣金收入排行 amount -->
    <div class="sevenitem">
      <div class="index_part_title">
        <span> <i class="el-icon-s-custom"></i>佣金收入排行</span>
        <i
          class="el-icon-refresh refresh"
          @click="$bus.$emit('refresh', 'amount')"
        ></i>
      </div>
      <div class="sevenitem_box" @click="$router.push('/index/user')">
        <div v-if="data.one && data.one != false">
          <div class="sevenitem_top">
            <div class="sevenitem_top_ava" v-if="data.one[1]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.one[1].avatar)" alt="" />
                <img src="./../../../assets/img/index/king2.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>
                  {{
                    data.one[1].nickname == ""
                      ? data.one[1].username
                      : data.one[1].nickname
                  }}
                </p>
                <p>{{ $fnc.toFixedZ(data.one[1].sum_amount) }}</p>
              </div>
            </div>
            <div class="sevenitem_top_ava" v-if="data.one[0]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.one[0].avatar)" alt="" />
                <img src="./../../../assets/img/index/king1.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>
                  {{
                    data.one[0].nickname == ""
                      ? data.one[0].username
                      : data.one[0].nickname
                  }}
                </p>
                <p>{{ $fnc.toFixedZ(data.one[0].sum_amount) }}</p>
              </div>
            </div>
            <div class="sevenitem_top_ava" v-if="data.one[2]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.one[2].avatar)" alt="" />
                <img src="./../../../assets/img/index/king3.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>
                  {{
                    data.one[2].nickname == ""
                      ? data.one[2].username
                      : data.one[2].nickname
                  }}
                </p>
                <p>{{ $fnc.toFixedZ(data.one[2].sum_amount) }}</p>
              </div>
            </div>
          </div>
          <div class="sevenitem_table">
            <div>
              <span>头像</span>
              <span>昵称</span>
              <span>佣金收入</span>
            </div>
            <div v-for="(item, i) in data.one" :key="i" v-show="i > 2">
              <span>
                <img :src="$fnc.getImgUrl(item.avatar)" alt="" />
              </span>
              <span class="tabletitle">{{
                item.nickname == "" ? item.username : item.nickname
              }}</span>
              <span>{{ $fnc.toFixedZ(item.sum_amount) }}</span>
            </div>
          </div>
        </div>
        <div v-else class="nomore_shop">暂无排行...</div>
      </div>
    </div>
    <!-- //市场团队排名 team -->
    <div class="sevenitem">
      <div class="index_part_title">
        <span> <i class="el-icon-s-custom"></i>市场团队排名</span>
        <i
          class="el-icon-refresh refresh"
          @click="$bus.$emit('refresh', 'team')"
        ></i>
      </div>
      <div class="sevenitem_box" @click="$router.push('/index/user')">
        <div v-if="data.two && data.two != false">
          <div class="sevenitem_top">
            <div class="sevenitem_top_ava" v-if="data.two[1]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.two[1].avatar)" alt="" />
                <img src="./../../../assets/img/index/king2.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>
                  {{
                    data.two[1].nickname == ""
                      ? data.two[1].username
                      : data.two[1].nickname
                  }}
                </p>
                <p>{{ data.two[1].zvip }}</p>
              </div>
            </div>
            <div class="sevenitem_top_ava" v-if="data.two[0]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.two[0].avatar)" alt="" />
                <img src="./../../../assets/img/index/king1.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>
                  {{
                    data.two[0].nickname == ""
                      ? data.two[0].username
                      : data.two[0].nickname
                  }}
                </p>
                <p>{{ data.two[0].zvip }}</p>
              </div>
            </div>
            <div class="sevenitem_top_ava" v-if="data.two[2]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.two[2].avatar)" alt="" />
                <img src="./../../../assets/img/index/king3.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>
                  {{
                    data.two[2].nickname == ""
                      ? data.two[2].username
                      : data.two[2].nickname
                  }}
                </p>
                <p>{{ data.two[2].zvip }}</p>
              </div>
            </div>
          </div>
          <div class="sevenitem_table">
            <div>
              <span>头像</span>
              <span>昵称</span>
<!--              <span>团队人数</span>-->
              <span>直推人数</span>
            </div>
            <div v-for="(item, i) in data.two" :key="i" v-show="i > 2">
              <span>
                <img :src="$fnc.getImgUrl(item.avatar)" alt="" />
              </span>
              <span class="tabletitle">{{
                item.nickname == "" ? item.username : item.nickname
              }}</span>
<!--              <span>{{ item.zvip }}</span>-->
              <span>{{ item.yvip }}</span>
            </div>
          </div>
        </div>
        <div v-else class="nomore_shop">暂无排行...</div>
      </div>
    </div>
    <!-- //自营商品销售排行 product_ranking -->
    <div class="sevenitem">
      <div class="index_part_title">
        <span> <i class="el-icon-s-custom"></i> 自营商品销售排行</span>
        <i
          class="el-icon-refresh refresh"
          @click="$bus.$emit('refresh', 'product_ranking')"
        ></i>
      </div>
      <div class="sevenitem_box" @click="$router.push('/index/shop')">
        <div v-if="data.three && data.three != false">
          <div class="sevenitem_top">
            <div class="sevenitem_top_ava" v-if="data.three[1]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.three[1].piclink)" alt="" />
                <img src="./../../../assets/img/index/king2.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>{{ data.three[1].title }}</p>
                <p>{{ data.three[1].real_sale }}</p>
              </div>
            </div>
            <div class="sevenitem_top_ava" v-if="data.three[0]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.three[0].piclink)" alt="" />
                <img src="./../../../assets/img/index/king1.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>{{ data.three[0].title }}</p>
                <p>{{ data.three[0].real_sale }}</p>
              </div>
            </div>
            <div class="sevenitem_top_ava" v-if="data.three[2]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.three[2].piclink)" alt="" />
                <img src="./../../../assets/img/index/king3.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>{{ data.three[2].title }}</p>
                <p>{{ data.three[2].real_sale }}</p>
              </div>
            </div>
          </div>
          <div class="sevenitem_table">
            <div>
              <span>头像</span>
              <span>昵称</span>
              <span>真实销量</span>
            </div>
            <div v-for="(item, i) in data.three" :key="i" v-show="i > 2">
              <span>
                <img :src="$fnc.getImgUrl(item.piclink)" alt="" />
              </span>
              <span class="tabletitle">{{ item.title }}</span>
              <span>{{ item.real_sale }}</span>
            </div>
          </div>
        </div>
        <div v-else class="nomore_shop">暂无排行...</div>
      </div>
    </div>
    <div class="sevenitem" v-if="is_open.shbxt && is_open.shbxt.is_open == '1'">
      <div class="index_part_title">
        <span> <i class="el-icon-s-custom"></i>供应商商品销售排行</span>
        <i
          class="el-icon-refresh refresh"
          @click="$bus.$emit('refresh', 'statistics_ranking')"
        ></i>
      </div>
      <div
        class="sevenitem_box"
        @click="$router.push('/index/supplier/suppliershops')"
      >
        <div v-if="data.four && data.four != false">
          <div class="sevenitem_top">
            <div class="sevenitem_top_ava" v-if="data.four[1]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.four[1].piclink)" alt="" />
                <img src="./../../../assets/img/index/king2.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>{{ data.four[1].title }}</p>
                <p>{{ data.four[1].real_sale }}</p>
              </div>
            </div>
            <div class="sevenitem_top_ava" v-if="data.four[0]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.four[0].piclink)" alt="" />
                <img src="./../../../assets/img/index/king1.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>{{ data.four[0].title }}</p>
                <p>{{ data.four[0].real_sale }}</p>
              </div>
            </div>
            <div class="sevenitem_top_ava" v-if="data.four[2]">
              <div class="sevenitem_top_ava_img">
                <img :src="$fnc.getImgUrl(data.four[2].piclink)" alt="" />
                <img src="./../../../assets/img/index/king3.png" alt="" />
              </div>
              <div class="sevenitem_top_ava_mask">
                <p>{{ data.four[2].title }}</p>
                <p>{{ data.four[2].real_sale }}</p>
              </div>
            </div>
          </div>
          <div class="sevenitem_table">
            <div>
              <span>头像</span>
              <span>昵称</span>
              <span>真实销量</span>
            </div>
            <div v-for="(item, i) in data.four" :key="i" v-show="i > 2">
              <span>
                <img :src="$fnc.getImgUrl(item.piclink)" alt="" />
              </span>
              <span class="tabletitle">{{ item.title }}</span>
              <span>{{ item.real_sale }}</span>
            </div>
          </div>
        </div>
        <div v-else class="nomore_shop">暂无排行</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "sevenbox",
  data() {
    return {};
  },
  props: {
    data: {
      type: Object,
      default: () => ({
        one: false,
        two: false,
        three: false,
        four: false,
      }),
    },
  },
  computed: {
    ...mapState({
      is_open: (state) => state.plugin,
    }),
  },
  components: {},
  methods: {
    refresh() {
      this.$bus.$emit("refresh", "amount");
      this.$bus.$emit("refresh", "amount");
    },
  },
};
</script>
<style lang="less" scoped>
.sevenbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.sevenitem {
  flex: 1;
  margin-right: 15px;
  background-color: #ffffff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 5px 20px #e4e4e4;
  .sevenitem_box {
    width: 100%;
    .nomore_shop {
      width: 100%;
      height: 570px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }
    .sevenitem_top {
      width: 100%;
      height: 220px;
      display: flex;
      justify-content: space-between;

      position: relative;
      align-items: flex-end;
      .sevenitem_top_ava:nth-of-type(1) {
        .sevenitem_top_ava_img {
          border: 2px solid #b7bcd4;
        }
        .sevenitem_top_ava_mask {
          background-image: linear-gradient(#eceff5, #ffffff);
        }
      }
      .sevenitem_top_ava:nth-of-type(2) {
        margin-bottom: 20px;
        .sevenitem_top_ava_img {
          width: 88px;
          height: 88px;
          margin-top: -45px;
          border: 2px solid #f5c633;
        }
        .sevenitem_top_ava_mask {
          background-image: linear-gradient(#fff0c8, #ffffff);
        }
      }
      .sevenitem_top_ava:nth-of-type(3) {
        .sevenitem_top_ava_img {
          border: 2px solid #fc9738;
        }
        .sevenitem_top_ava_mask {
          background-image: linear-gradient(#ffeadb, #ffffff);
        }
      }
      .sevenitem_top_ava {
        width: 100%;
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        > .sevenitem_top_ava_img {
          width: 80px;
          height: 80px;
          border: 2px solid #b7bcd4;
          border-radius: 50%;
          padding: 2px;
          margin-top: -35px;
          z-index: 999;
          position: absolute;

          > img:nth-of-type(1) {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
          > img:nth-of-type(2) {
            width: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: -32px;
            width: 40px;
            margin: auto;
          }
        }
        .sevenitem_top_ava_mask {
          width: 120px;
          height: 100px;
          background-image: linear-gradient(#eceff5, #ffffff);
          border-radius: 25px;
          display: flex;
          flex-flow: column;
          justify-content: flex-end;
          align-items: center;
          padding-bottom: 15px;
          > p {
            width: 100%;
            overflow: hidden;
            //隐藏部分显示为省略号
            text-overflow: ellipsis;
            //禁止文本自动换行
            white-space: nowrap;
            font-size: 14px;
            color: #1a1615;
            padding-bottom: 2px;
          }
          > p:nth-of-type(2) {
            font-size: 14px;
          }
        }
      }
    }
    .sevenitem_table {
      width: 100%;
      display: flex;
      flex-flow: column;
      justify-content: flex-start;
      align-items: center;
      > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        border-bottom: 1px solid #f3f3f3;
        > span {
          flex: 1;
          font-size: 14px;
          color: #76839d;
          font-weight: bold;
          display: flex;
          justify-content: center;
          align-items: center;

          > img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
          }
        }
        .tabletitle {
          display: block;
          //溢出隐藏
          overflow: hidden;
          //隐藏部分显示为省略号
          text-overflow: ellipsis;
          //禁止文本自动换行
          white-space: nowrap;
        }
      }
    }
  }
}
.sevenitem:last-of-type {
  margin-right: 0;
}
</style>
